<template>
  <div class="form">
    <div class="back" @click="back">返回</div>
    <div class="title">{{ role }}登录</div>
    <div class="group">
      <input type="tel" placeholder="用户名/手机号" v-model="state.mobile" />
    </div>
    <div class="group">
      <input type="password" placeholder="密码" v-model="state.password" />
    </div>
    <button class="submit" @click="submit">登录</button>
    <div class="register" v-if="route.query.role == 'second'">
      <a @click="register">复试导演注册</a>
    </div>
  </div>
</template>

<script setup>
import { useRouter, useRoute } from "vue-router";
import ajax from "../util/http";
import { reactive, getCurrentInstance } from "vue";
import form from "../util/validator";
const { proxy } = getCurrentInstance();

const state = reactive({
  mobile: "",
  password: "",
});
let role = "";

const router = useRouter();
const route = useRoute();
switch (route.query.role) {
  case "first":
    // state.mobile = "18516523351";
    role = "初试导演";
    break;
  case "second":
    // state.mobile = "18721315831";
    role = "复试导演";
    break;
  case "host":
    // state.mobile = "18516523352";
    role = "主持人";
    break;
  case "photographer":
    // state.mobile = "18516523353";
    role = "拍摄者";
    break;
  default:
    break;
}

const submit = () => {
  let data = {
    cid: route.query.cid,
    account: state.mobile,
    password: state.password,
  };
  let rules = [
    {
      name: "account",
      rule: ["required"],
      msg: ["请输入用户名/手机号"],
    },
    {
      name: "password",
      rule: ["required"],
      msg: ["请输入密码"],
    },
  ];
  let checkForm = form.validation(data, rules);
  if (!checkForm) {
    ajax.post("/star/oper/login", data).then((res) => {
      if (res.code == 1) {
        localStorage.setItem("userinfo", JSON.stringify(res.data.userinfo));
        if (["first", "second", "photographer"].includes(route.query.role)) {
          router.push({
            path: "/number",
            query: {
              role: route.query.role,
            },
          });
        }
        if (route.query.role == "host") {
          router.push("/host");
        }
      }
    });
  } else {
    proxy.$message({ content: checkForm });
  }
};

const register = () => {
  router.push({
    path: "/second/register",
    query: {
      cid: route.query.cid,
    },
  });
};

const back = () => {
  router.back();
};
</script>
<style scoped>
.box {
  width: 100%;
}
.register {
  margin-top: 10px;
  text-align: center;
}
.register a {
  text-decoration: underline;
}
.back {
  position: absolute;
  /* text-decoration: underline; */
  color: #333;
  top: 10px;
  /* margin-top: 5px; */
  /* border: 1px solid #333; */
  /* padding: 0 10px; */
  /* border-radius: 10px; */
  display: flex;
  align-items: center;
}
.back:before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-style: solid;
  border-color: #333;
  border-width: 1px 1px 0 0;
  transform: rotate(-135deg);
}
</style>